//------------------------------------------------------------
// Page Transitions
// Based on http://tympanus.net/Development/PageTransitions/
//
// Rewritten for effeckts project
//------------------------------------------------------------

@import "../_variables";

[data-effeckt-page] {
  position: relative;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden;
  visibility: hidden;
  z-index:0;
  padding: 2rem 4rem 0;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  display: none;

  &.effeckt-page-active {
    display: block;
    visibility: visible;
    z-index:10;
  }

  &.effeckt-page-animating {
    overflow: hidden;
    z-index: 100;
    position: absolute;
  }
}

//-----------------------------------------------------
// Slide's Classes
//-----------------------------------------------------


// Slide From/To Left
[data-effeckt-page].slide-from-left {
  animation: slideFromLeft $effeckt-page-transition-duration forwards ease-in-out;
}
[data-effeckt-page].slide-to-left {
  animation: slideToLeft $effeckt-page-transition-duration forwards ease-in-out;
}

// Slide From/To Right
[data-effeckt-page].slide-from-right {
  animation: slideFromRight $effeckt-page-transition-duration forwards ease-in-out;
}
[data-effeckt-page].slide-to-right {
  animation: slideToRight $effeckt-page-transition-duration forwards ease-in-out;
}

// Slide From/To Top
[data-effeckt-page].slide-from-top {
  animation: slideFromTop $effeckt-page-transition-duration forwards ease-in-out;
}
[data-effeckt-page].slide-to-top {
  animation: slideToTop $effeckt-page-transition-duration forwards ease-in-out;
}

// Slide From/To Bottom
[data-effeckt-page].slide-from-bottom {
  animation: slideFromBottom $effeckt-page-transition-duration forwards ease-in-out;
}
[data-effeckt-page].slide-to-bottom {
  animation: slideToBottom $effeckt-page-transition-duration forwards ease-in-out;
}

// Scale Up From Behind
[data-effeckt-page].scale-up-from-behind {
  animation: scaleUpFromBehind $effeckt-page-transition-duration forwards ease-in-out;
  @extend .animation-delay-300;
}


//-----------------------------------------------------
// Scale's Classes
//-----------------------------------------------------


// Scale Up To Front
[data-effeckt-page].scale-up-to-front {
  animation: scaleUpToFront $effeckt-page-transition-duration forwards ease-in-out;
  
  &.effeckt-page-animating {
    @extend .page-on-top;
  }
}

// Scale Down To Behind
[data-effeckt-page].scale-down-to-behind {
  animation: scaleDownToBehind $effeckt-page-transition-duration forwards ease-in-out;
}

// Scale Down From Front
[data-effeckt-page].scale-down-from-front {
  animation: scaleDownFromFront $effeckt-page-transition-duration forwards ease-in-out;
  @extend %animation-delay-300;
  
  &.effeckt-page-animating {
    @extend .page-on-top;
  }
}

// Scale Down Slide To Left
[data-effeckt-page].scale-down-slide-to-left {
  animation: scaleDownSlideToLeft $effeckt-page-transition-duration * 2 forwards ease-in-out;
}

// Scale Down Slide From Right
[data-effeckt-page].scale-down-slide-from-right {
  animation: scaleDownSlideFromRight $effeckt-page-transition-duration * 2 forwards ease-in-out;
}

// Scale Down Slide From Left
[data-effeckt-page].scale-down-slide-from-left {
  animation: scaleDownSlideFromLeft $effeckt-page-transition-duration * 2 forwards ease-in-out;
}

// Scale Down Slide To Right
[data-effeckt-page].scale-down-slide-to-right {
  animation: scaleDownSlideToRight $effeckt-page-transition-duration * 2 forwards ease-in-out;
}

// Scale Down Slide From Top
[data-effeckt-page].scale-down-slide-from-top {
  animation: scaleDownSlideFromTop $effeckt-page-transition-duration * 2 forwards ease-in-out;
}

// Scale Down Slide To Bottom
[data-effeckt-page].scale-down-slide-to-bottom {
  animation: scaleDownSlideToBottom $effeckt-page-transition-duration * 2 forwards ease-in-out;
}

// Scale Down Slide From Bottom
[data-effeckt-page].scale-down-slide-from-bottom {
  animation: scaleDownSlideFromBottom $effeckt-page-transition-duration * 2 forwards ease-in-out;
}

// Scale Down Slide To Top
[data-effeckt-page].scale-down-slide-to-top {
  animation: scaleDownSlideToTop $effeckt-page-transition-duration * 2 forwards ease-in-out;
}


//-----------------------------------------------------
// Rotate's Classes
//-----------------------------------------------------


// Rotate to Behind
[data-effeckt-page].rotate-to-behind {
  transform-origin: -50% 50%;
  animation: rotateToBehind $effeckt-page-transition-duration/2 both ease-in;
}

// Rotate to Front
[data-effeckt-page].rotate-to-front {
  transform-origin: 150% 50%;
  animation: rotateToFront $effeckt-page-transition-duration/2 both ease-out;
}


//-----------------------------------------------------
// Flip's Classes
//-----------------------------------------------------


// Flip to Right
[data-effeckt-page].flip-to-right-front {
  backface-visibility: hidden;
  animation: flipToRightBack $effeckt-page-transition-duration forwards ease;
}

[data-effeckt-page].flip-to-right-back {
  backface-visibility: hidden;
  animation: flipToRight $effeckt-page-transition-duration forwards ease;
}

// Flip to Left
[data-effeckt-page].flip-to-left-front {
  backface-visibility: hidden;
  animation: flipToLeftBack $effeckt-page-transition-duration forwards ease;
}

[data-effeckt-page].flip-to-left-back {
  backface-visibility: hidden;
  animation: flipToLeft $effeckt-page-transition-duration forwards ease;
}

// Flip to Top
[data-effeckt-page].flip-to-top-front {
  backface-visibility: hidden;
  animation: flipToTopBack $effeckt-page-transition-duration forwards ease;
}

[data-effeckt-page].flip-to-top-back {
  backface-visibility: hidden;
  animation: flipToTop $effeckt-page-transition-duration forwards ease;
}

// Flip to Bottom
[data-effeckt-page].flip-to-bottom-front {
  backface-visibility: hidden;
  animation: flipToBottomBack $effeckt-page-transition-duration forwards ease;
}

[data-effeckt-page].flip-to-bottom-back {
  backface-visibility: hidden;
  animation: flipToBottom $effeckt-page-transition-duration forwards ease;
}



//-----------------------------------------------------
// Animations
//-----------------------------------------------------


// Slides Animations

@keyframes slideFromTop {
  from {
    transform: translateY(-100%);
  }
}

@keyframes slideToTop {
  to {
    transform: translateY(-100%);
  }
}

@keyframes slideFromRight {
  from {
    transform: translateX(100%);
  }
}
@keyframes slideToRight {
  to {
    transform: translateX(100%);
  }
}

@keyframes slideFromBottom {
  from {
    transform: translateY(100%);
  }
}

@keyframes slideToBottom {
  to {
    transform: translateY(100%);
  }
}

@keyframes slideFromLeft {
  from {
    transform: translateX(-100%);
  }
}
@keyframes slideToLeft {
  to {
    transform: translateX(-100%);
  }
}


// Scale Animations

@keyframes scaleUpFromBehind {
  from {
    opacity:0;
    transform: scale(0.5);
  }
}
@keyframes scaleUpToFront {
  to {
    opacity:0;
    transform: scale(1.3);
  }
}

@keyframes scaleDownToBehind {
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}
@keyframes scaleDownFromFront {
  from {
    opacity: 0;
    transform: scale(1.3);
  }
  to {
   opacity:1; 
  }
}


// Scale Down Slide Animations

@keyframes scaleDownSlideToLeft {
  25% { opacity: .5; transform: translateZ(-500px); }
  75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
  100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
}
@keyframes scaleDownSlideFromRight {
  0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
  75% { opacity: .5; transform: translateZ(-500px); }
  100% { opacity: 1; transform: translateZ(0) translateX(0); }
}
@keyframes scaleDownSlideFromLeft {
  0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
  75% { opacity: .5; transform: translateZ(-500px); }
  100% { opacity: 1; transform: translateZ(0) translateX(0%); }
}
@keyframes scaleDownSlideToRight {
  25% { opacity: .5; transform: translateZ(-500px); }
  75% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
  100% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
}
@keyframes scaleDownSlideFromTop {
  0%, 25% { opacity: .5; transform: translateZ(-500px) translateY(-200%); }
  75% { opacity: .5; transform: translateZ(-500px); }
  100% { opacity: 1; transform: translateZ(0) translateY(0%); }
}
@keyframes scaleDownSlideToBottom {
  25% { opacity: .5; transform: translateZ(-500px); }
  75% { opacity: .5; transform: translateZ(-500px) translateY(200%); }
  100% { opacity: .5; transform: translateZ(-500px) translateY(200%); }
}
@keyframes scaleDownSlideFromBottom {
  0%, 25% { opacity: .5; transform: translateZ(-500px) translateY(200%); }
  75% { opacity: .5; transform: translateZ(-500px); }
  100% { opacity: 1; transform: translateZ(0) translateY(0%); }
}
@keyframes scaleDownSlideToTop {
  25% { opacity: .5; transform: translateZ(-500px); }
  75% { opacity: .5; transform: translateZ(-500px) translateY(-200%); }
  100% { opacity: .5; transform: translateZ(-500px) translateY(-200%); }
}

// Rotate Animations

@keyframes rotateToBehind {
  to { opacity: 0; transform: translateZ(-500px) rotateY(90deg); }
}

@keyframes rotateToFront {
  from { opacity: 0; transform: translateZ(-500px) rotateY(-90deg); }
}


// Flip Animations

@keyframes flipToRight {
  to {
    transform: rotateY(180deg);
  }
}
@keyframes flipToRightBack {
  from {
    transform: rotateY(-180deg);
  }
}

@keyframes flipToLeft {
  to {
    transform: rotateY(-180deg);
  }
}
@keyframes flipToLeftBack {
  from {
    transform: rotateY(180deg);
  }
}

@keyframes flipToTop {
  to {
    transform: rotateX(180deg);
  }
}
@keyframes flipToTopBack {
  from {
    transform: rotateX(-180deg);
  }
}

@keyframes flipToBottom {
  to {
    transform: rotateX(-180deg);
  }
}
@keyframes flipToBottomBack {
  from {
    transform: rotateX(180deg);
  }
}



//-----------------------------------------------------
// Utils Classes
// If you want to use it againts normal definition
//-----------------------------------------------------


// Make this page on top
.page-on-top {
  z-index:999;
}

// Animation Delay Classes
.animation-delay-100 {
  animation-delay: .100s;
}
.animation-delay-200 {
  animation-delay: .200s;
}
.animation-delay-300 {
  animation-delay: .300s;
}
.animation-delay-500 {
  animation-delay: .500s;
}
.animation-delay-700 {
  animation-delay: .700s;
}
.animation-delay-1000 {
  animation-delay: 1000s;
}
